Ext.namespace('GH.ui', 'GH.ui.forms');

var ds = new Ext.data.Store({
    url: '/api/search_patients_on_medical_record',
    reader: new Ext.data.JsonReader({
      root: 'data',
      totalProperty: 'totalCount',
      id: 'medical_record_id'
    }, [{
      name: 'medicalRecord',
      mapping: 'medical_record'
    },{
        name: 'lastLogin',
        type: 'date',
        mapping: 'last_login'
    }, {
      name: 'patientName',
      mapping: 'patient_name'
    }])
  });

//Custom rendering Template
var resultTpl = new Ext.XTemplate('<tpl for="."><div class="search-item">', 
		                              '<div style="width:80%; vertical-align:top; color:DarkGrey; display:inline-block;">{medicalRecord}</div>', 
		                              '<div style="display:inline-block; heigh:100%;">User: <span style="font-weight:bold; font-size:105%">{patientName}</span><br />Last Login: {lastLogin:date("M j, Y")}</div>',
		       
                                  '</div></tpl>');

GH.ui.forms.PatientSearchForm = Ext.extend(Ext.form.ComboBox, {
    store: ds,
    displayField: 'title',
    typeAhead: false,
    loadingText: 'Searching...',
    width: 770,
    pageSize: 10,
    hideTrigger: true,
    tpl: resultTpl,
    itemSelector: 'div.search-item',
    
    listeners: {
    	'afterrender': function() {
    		this.store.setBaseParam('csrfmiddlewaretoken', Ext.get("hidden-csrf").dom.children[0].children[0].value);   		
    	}
    }
});